<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fetch'em</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/bootstrap-responsive.css" rel="stylesheet">
<style type="text/css">
body {
        padding-top: 60px;
        padding-bottom: 40px;
}
.sidebar-nav {
        padding: 9px 0;
}
</style>

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<script>
function generateRow(){
var d = document.getElementById('TAemail');
var newRow = document.createElement('input');
newRow.type = 'text'; 
newRow.className='span2';
newRow.name='ExtraTAEmail' + document.getElementById('id_ExtraEmailCounter').value;
newRow.placeholder='TA Email';


var TAName = document.createElement('input');
TAName.type = 'text';
TAName.className='span2';
TAName.name='ExtraTAName' + document.getElementById('id_ExtraEmailCounter').value;
TAName.placeholder='TA Name';

var space = document.createTextNode('\u00a0 \u00a0');


d.appendChild(TAName);
d.appendChild(space);
d.appendChild(newRow);

document.getElementById('id_ExtraEmailCounter').value++;
}
</script>
<body>
<div class="container">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container"> <a class="brand" href="#">Fetch'em</a>
        <div class="btn-group pull-right"> <a class="btn btn-primary" href="/logout"> Sign out </a> </div>
        <div class="nav-collapse">
          <ul class="nav">
            <li><a data-toggle="modal" href="#newCourseModal"><i class="icon-plus"></i> New Course</a></li>
          </ul>
          <p class="navbar-text pull-right"> {{ Name }}&nbsp;&nbsp;&nbsp; </p>
        </div>
        <!--/.nav-collapse --> 
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="span3">
      <img src="{{ STATIC_URL }}img/arrow-left.jpg" align="right">
      </div>
      <div class="span9"> 
      <h1> Hi! Seems like you are new to Fetch'em.
      </h1>
      <h3> Get started by creating a course.
      </h3>
      
      </div>
    </div>
  </div>
</div>
  <!-- New Course Modal -->
          <div id="newCourseModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="courseModalLabel" aria-hidden="true">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h3 id="courseModalLabel">Create new course</h3>
            </div>
            <div class="modal-body">
            <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
             <!-- <input class="span3" type="text" placeholder="Course Number">
              <input class="span3" type="text" placeholder="Name of course">
          -->
          {{ newCourseForm.CourseNo }} &nbsp; {{ newCourseForm.CourseNo.errors }}
          {{ newCourseForm.Name }} &nbsp; {{ newCourseForm.Name.errors }}
              <p>Enter the credentials of the course submission Gmail account.</p>
          <p>{{ newCourseForm.SubEmail }} &nbsp; {{ newCourseForm.SubEmail.errors }}<p>
          {{ newCourseForm.SubPassword }} &nbsp; {{ newCourseForm.SubPassword.errors }}
          <p> {{ newCourseForm.SubPasswordConfirm }} &nbsp; {{ newCourseForm.SubPasswordConfirm.errors }} </p>
     <p>
        {{ newCourseForm.Semester }} &nbsp; {{ newCourseForm.Semester.errors }}
        {{ newCourseForm.Year }} &nbsp; {{ newCourseForm.Year.errors }} 
        </p>
          
             <!-- <input class="span3" type="text" placeholder="Login">
              <input class="span3" type="password" placeholder="Password"> -->

              <p>If you have TAs in your course, enter their names and email accounts below:</p>
           <!--   <input class="span3" type="text" placeholder="Email of TA"> -->
          {{ newCourseForm.TAName }} &nbsp; {{ newCourseForm.TAName.errors }}
          {{ newCourseForm.TAEmail }} &nbsp; {{ newCourseForm.TAEmail.errors }}
          <div id='TAemail'></div>
              <p><!-- <button class="btn" name="addTA"><i class="icon-plus" onclick='generateRow()'></i> Add TA email</button></p> -->
            <input class='btn' type='button' name='Add TA' value='Add TA' onClick='generateRow()'>
          <input type='hidden' id='id_ExtraEmailCounter' name='ExtraEmailCounter' value='0'></p>
              <p>Select the xls file containing list of all students with their email ids:</p>
          {{ newCourseForm.ExcelSheet }} &nbsp; {{ newCourseForm.ExcelSheet.errors }}
             <p> <a href="{{ STATIC_URL }}SampleXLSFetchem.xls" class="btn btn-mini btn-info">Download sample xls file</a></p>

              </div>
              <div class="modal-footer">
              <button class="btn" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary" name="courseCreate">Create</button>
            </form>
          </div>
      </div>
<!-- Le javascript
    ================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="{{ STATIC_URL }}js/bootstrap.js"></script> 
<script src="{{ STATIC_URL }}js/jquery.js"></script> 
<script src="{{ STATIC_URL }}js/jquery-ui-min.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script> 
<script src="{{ STATIC_URL }}js/bootstrap-timepicker.js"></script>
<!-- <script src="{{ STATIC_URL }}js/anytime.js"></script> -->
<!-- <script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap-timepicker.js"></script> -->
   
 <script type="text/javascript"> 
  $(function(){
    $(".dateinput").datepicker();
  });
</script>


<script type="text/javascript">
$(function(){
	$('.timepicker-default').timepicker();
});
</script>


{% if openCourseModal %}
<script>
        $('#newCourseModal').modal('show');
</script>
{% endif %} 

{% if openAssignmentModal %}
<script>
        $('#assModal').modal('show');
</script>
{% endif %} 
{% if miscArgs.passValFail %}
<script>
        $('#newCourseModal').modal('show');
		alert('The passwords did not match!');
</script>
{% endif %}
{% if miscArgs.courseCreateLoginFailed %}
<script>
        $('#newCourseModal').modal('show');
		alert('The entered Email and password for the submission Email are not valid! Please check them and re-enter correct credentials.');
</script>
{% endif %}
{% if miscArgs.ExcelIssue %}
<script>
        $('#newCourseModal').modal('show');
		alert('{{ miscArgs.ExcelError }}');
</script>
{% endif %}

{% if miscArgs.DuplicateCourse %}
<script>
        $('#newCourseModal').modal('show');
		alert('{{ miscArgs.DuplicateCourseError }}');
</script>
{% endif %}
</body>
</html>
